<template>
  <div>
    <div class="text" v-if="properties.actionerRules && properties.actionerRules.length">
      <div v-for="(obj, i) in properties.actionerRules" :key="i">
        <div class="audit-type">审批类型：{{ formatValue(obj.type, typeArr) }}</div>
        <div class="actioner-list">
          <template v-if="obj.type === 3"
            >审批人为发起人{{ formatValue(obj.level, levelArr) }}</template
          >
          <template v-if="obj.type === 4 && obj.endType === 2"
            >审批人为{{ formatValue(obj.level, topLevelArr) }}</template
          >
          <template v-if="obj.type === 5"
            >审批人为{{ userInputName(obj.userInputId) }} - 人员选择器
          </template>
          <template
            v-if="
              obj.type === 1 ||
              obj.type === 2 ||
              (obj.type === 4 && obj.endType === 1) ||
              obj.type === 6
            "
          >
            <a v-for="(a, j) in obj.actioners" :key="a.id">
              {{ a.name }}
              <template v-if="j != obj.actioners.length - 1">,</template>
            </a>
          </template>
          <template
            v-if="obj.type != 7 && obj.type != 4 && (obj.type != 1 || obj.actioners.length > 1)"
          >
            <template v-if="properties.approvalMethod === 1">（会签）</template>
            <template v-if="properties.approvalMethod === 2">（或签）</template>
          </template>
          <p v-if="obj.type === 4 && properties.canOver === 2">审批人员可选择继续或完结流程</p>
          <p v-if="obj.type === 4 && properties.canOver === 1">审批人员不可选择继续或完结流程</p>
        </div>
        <div v-if="obj.type != 7 && obj.type != 1">
          审批人为空时<a v-if="properties.approvalNone === 1">自动通过</a
          ><a v-if="properties.approvalNone === 2">自动转交管理员</a>
        </div>
      </div>
    </div>
    <div v-else class="text placeholder">请选择审批人</div>
  </div>
</template>

<script setup lang="ts">
import type { Properties } from '../../types'
import { auditTypeArr, auditLevelArr, auditTopLevelArr } from '../../configs/dicts'
const props = defineProps({
  properties: {
    type: Object as () => Properties,
    default: () => {
      return {
        approvalNone: 1,
        actionerRules: []
      }
    }
  }
})
const typeArr = ref(auditTypeArr)
const levelArr = ref(auditLevelArr)
const topLevelArr = ref(auditTopLevelArr)
const userInputList = ref([
  {
    key: '', // 表单项key
    title: '' // 表单项名称
  }
])
const formatValue = (value: number, arr: any[]) => {
  return arr.find((el) => el.value === value)?.label || ''
}
const userInputName = (id: string) => {
  const input = userInputList.value.find((el) => el.key === id)
  return input ? input.title : ''
}
watch(props, () => {
  console.log(props)
})
</script>
